<template>
  <div class="login">
    <span class="span">×</span>
    <p class="p">账号密码登录</p>
    <div class="input">
      <input type="text" placeholder="昵称/手机号/邮箱">
      <div class="input1">
        <input type="text" placeholder="请输入密码">
        <span style="width: 10px;"></span>
        <span class="input1-span">忘记密码？</span>
      </div>

    </div>
    <button class="btn">登录</button>
    <div class="dl">
      <span class="dl-span">验证码登录</span>
      <span>|</span>
      <span class="dl-span">登录遇到问题</span>
    </div>
    <div class="dl1">
      <span class="dl-span">————</span>
      <span>社交账号登录</span>
      <span>————</span>
    </div>
  </div>
</template>

<script>
export default {
}
</script>
<style lang="scss" scoped>
$width: 100%;

.login {
  width: 92%;
  margin-left: 4%;
  // background-color: red;

  .span {
    width: $width;
    height: 20px;
    float: left;
    font-size: 35px;
    font-weight: 400;
    margin-bottom: 100px;
  }

  .p {
    width: $width;
    text-align: center;
    font-size: 27px;
    margin-bottom: 40px;
  }

  .input {
    width: $width;
    display: flex;
    flex-direction: column;


    input {
      width: $width;
      outline: none;
      height: 22.4px;
      padding: 10px 0;
      border: 0;
      border-bottom: 1px solid #bbb;
      margin-top: 10px;

      &::placeholder {
        color: #9c9b9b;
        font-size: 16px;
      }
    }

    .input1 {
      display: flex;

      .input1-span {
        float: right;
        width: 74px;
        font-size: 16px;
        color: #6c757d;
        border-bottom: 1px solid #bbb;
      }
    }
  }

  .btn {
    width: $width;
    background-color: #F87F97;
    border-radius: 25px;
    height: 46px;
    border: 0;
    color: #fcf9f9b1;
    font-size: 18px;
    margin-top: 30px;
  }

  .dl {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    .dl-span {
      color: #007bff;
      margin-left: 10px;
      margin-right: 10px;
    }

  }
  .dl1{

  }
}
</style>
